/*
 * ===========================================
 * 首页样式 - index.vue
 * ===========================================
 * 使用新设计系统的首页专用样式
 */

/* ===========================================
 * 1. Hero 主视觉区域
 * =========================================== */

.hero {
	position: relative;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(
		135deg,
		var(--brand-primary) 0%,
		var(--brand-primary-600) 50%,
		var(--brand-primary-700) 100%
	);

	/* Hero 内容 */
	.hero-content {
		text-align: center;
		z-index: var(--z-30);
		color: var(--color-white);
		max-width: 800px;
		padding: 0 var(--space-4);

		h1 {
			font-size: var(--font-size-5xl);
			font-weight: var(--font-weight-bold);
			margin-bottom: var(--space-6);
			text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
			line-height: var(--line-height-tight);
		}

		p {
			font-size: var(--font-size-xl);
			margin-bottom: var(--space-8);
			color: rgba(255, 255, 255, 0.9);
			line-height: var(--line-height-relaxed);
		}
	}

	/* ===========================================
	 * 2. 动态粒子效果
	 * =========================================== */

	.particles {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: var(--z-10);

		.particle {
			position: absolute;
			display: block;
			pointer-events: none;
			background-color: rgba(255, 255, 255, 0.5);
			width: 2px;
			height: 2px;
			border-radius: var(--radius-full);
			animation: floatUp 15s linear infinite;

			&:nth-child(1) {
				left: 10%;
				top: 80%;
				width: 3px;
				height: 3px;
				animation-delay: 0s;
				animation-duration: 20s;
			}
			&:nth-child(2) {
				left: 25%;
				top: 90%;
				animation-delay: 2s;
				animation-duration: 18s;
			}
			&:nth-child(3) {
				left: 40%;
				top: 85%;
				width: 1px;
				height: 1px;
				animation-delay: 4s;
				animation-duration: 16s;
			}
			&:nth-child(4) {
				left: 55%;
				top: 95%;
				animation-delay: 1s;
				animation-duration: 22s;
			}
			&:nth-child(5) {
				left: 70%;
				top: 88%;
				width: 3px;
				height: 3px;
				animation-delay: 3s;
				animation-duration: 19s;
			}
			&:nth-child(6) {
				left: 85%;
				top: 92%;
				animation-delay: 5s;
				animation-duration: 17s;
			}
			&:nth-child(7) {
				left: 15%;
				top: 85%;
				width: 1px;
				height: 1px;
				animation-delay: 6s;
				animation-duration: 21s;
			}
			&:nth-child(8) {
				left: 30%;
				top: 95%;
				animation-delay: 8s;
				animation-duration: 16s;
			}
			&:nth-child(9) {
				left: 45%;
				top: 90%;
				width: 2px;
				height: 2px;
				animation-delay: 7s;
				animation-duration: 20s;
			}
			&:nth-child(10) {
				left: 60%;
				top: 87%;
				animation-delay: 9s;
				animation-duration: 18s;
			}
			&:nth-child(11) {
				left: 75%;
				top: 93%;
				width: 1px;
				height: 1px;
				animation-delay: 10s;
				animation-duration: 19s;
			}
			&:nth-child(12) {
				left: 90%;
				top: 89%;
				animation-delay: 11s;
				animation-duration: 17s;
			}
		}
	}

	/* ===========================================
	 * 3. 光束效果
	 * =========================================== */

	.light-streak {
		position: absolute;
		width: 200px;
		height: 2px;
		background: linear-gradient(
			90deg,
			transparent,
			rgba(255, 255, 255, 0.6),
			transparent
		);
		transform: rotate(-30deg);
		animation: lightMove 8s linear infinite;
		z-index: var(--z-20);

		&:nth-child(2) {
			animation-delay: 2s;
			top: 30%;
			animation-duration: 10s;
		}

		&:nth-child(3) {
			animation-delay: 4s;
			top: 60%;
			animation-duration: 12s;
		}
	}
}

/* ===========================================
 * 4. 内容区域基础样式
 * =========================================== */

.content-section {
	padding: var(--space-20) 0;
	position: relative;

	&:nth-child(even) {
		background: var(--content-bg-alt);
	}

	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 var(--space-4);
		box-sizing: border-box;
	}

	.service-item {
		margin-bottom: var(--space-12);

		&:last-child {
			margin-bottom: 0;
		}
	}
}

/* ===========================================
 * 5. 动画定义
 * =========================================== */

@keyframes floatUp {
	0% {
		opacity: 0;
		transform: translateY(0) rotate(0deg);
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(-100vh) rotate(360deg);
	}
}

@keyframes lightMove {
	0% {
		left: -200px;
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		left: 100vw;
		opacity: 0;
	}
}

/* ===========================================
 * 6. 响应式设计
 * =========================================== */

@media (max-width: 1024px) {
	.hero .hero-content {
		h1 {
			font-size: var(--font-size-4xl);
		}
		p {
			font-size: var(--font-size-lg);
		}
	}
}

@media (max-width: var(--breakpoint-md)) {
	.hero {
		height: 80vh;

		.hero-content {
			h1 {
				font-size: var(--font-size-3xl);
				margin-bottom: var(--space-4);
			}
			p {
				font-size: var(--font-size-base);
				margin-bottom: var(--space-6);
			}
		}
	}

	.content-section {
		padding: var(--space-16) 0;

		.service-item {
			margin-bottom: var(--space-8);
		}
	}
}

@media (max-width: var(--breakpoint-sm)) {
	.hero {
		height: 60vh;

		.hero-content {
			h1 {
				font-size: var(--font-size-2xl);
			}
			p {
				font-size: var(--font-size-sm);
			}
		}
	}

	.content-section {
		padding: var(--space-12) 0;
	}
}
